<template>
	<div class="container">
		<view class="LOGIN">English</view>
		<SignTitle />
		<StepBar :step='1'></StepBar>
		<Tips>
			<template #title>
				<text v-if="store.state.sign.number==='号码注册'">
					请输入11位手机号码
				</text>
				<text v-else>
					请输入您的邮箱地址
				</text>
			</template>
		</Tips>
		<div class="pdg">
			<view class="input" v-if="store.state.sign.number==='号码注册'">
				<uni-data-select class="selectA" v-model="active" :localdata="range"></uni-data-select>
				<van-field class="inputA" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="input" v-else>
				<van-field class="inputA" v-model="email" placeholder="请输入邮箱账号" />
			</view>
		</div>
		<div class="signBtn">
			<SubButton @click="submit">下一步</SubButton>
			<view class="SignIn" @click="LogIn">已有账号？去 <text>登录</text></view>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import StepBar from '@/components/signIn/StepBar/index.vue'
	import SignTitle from '@/components/signIn/signTitle/index.vue'
	import Tips from '@/components/signIn/Tips/index.vue'
	import SubButton from '@/components/signIn/subButton/index.vue'
	import { postSignAPI, getCountryList, checkMobile } from '@/api/sign'
	import { showNotify } from 'vant';
	// 更改过的地方
	import { ref, onMounted } from 'vue';
	import { useStore } from 'vuex'
	const store = useStore()

	// 点击跳转道登录页面
	const LogIn = () => {
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}

	// 区域值 
	const active = ref<string>('')
	// 国家列表
	const range = ref<string[]>([
	])
	// 注册模块
	// 获取区号的请求
	// 生命周期函数
	onMounted(async () => {
		try {
			// 发送地区区号的请求
			const result = await getCountryList()
			// 循环遍历添加
			result.data.forEach((item : any, index : any) => {
				item.text = result.data[index].dictLabel
				item.value = result.data[index].dictValue
				range.value.push(item)
			})
			// 默认选中
			console.log(result.data[0].dictValue,range.value)
			active.value = result.data[0].dictValue

		} catch (error) {
			console.error('请求错误，请检查网络')
		}
	})

	// 发送邮箱请求
	const email = ref('')
	// 发送邮箱注册请求
	const Email = async () => {
		try {
			// 判断是否发送的请求码
			store.state.sign.sourceType = 2
			argument.value = {
				email: email.value,
				sourceType: store.state.sign.sourceType
			}
			const rel = await checkMobile(argument.value)
			console.log(rel)
			if (rel.code === 200) {
				console.log('这个还没有注册')
				// 接受参数
				const data = {
					type: store.state.sign.type,
					sourceType: store.state.sign.sourceType,
					email: email.value
				}
				console.log('这个还没有注册',data)
				// 发送地区区号的请求
				const result = await postSignAPI(data)
				console.log(result)
				if (result.code === 200) {
					// 判断是否发送的请求码
					store.state.sign.sourceType = 2
					// 把验证码赋值给code
					store.state.sign.code = result.data
					console.log(store.state.sign.sourceType)
					uni.navigateTo({
						url: '/SignSubcontract/Verification/index'
					})
				}
			} else {
				showNotify({ type: 'danger', message: rel.msg });
			}
		} catch (error) {
			console.error('请求错误，请检查网络2')
		}
	}
	// 发送电话号码的请求
	const phone = ref('')
	// 发送手机号注册请求
	const Phone = async () => {
		try {
			// 判断是否发送的请求码
			store.state.sign.sourceType = 1
			argument.value = {
				mobile: phone.value,
				areacode: store.state.sign.areacode,
				sourceType: store.state.sign.sourceType
			}
			const rel = await checkMobile(argument.value)
			console.log(rel, 1)
			if (rel.code === 200) {
				// 接受参数
				const data = {
					mobile: store.state.sign.phone,
					type: store.state.sign.type,
					areacode: store.state.sign.areacode,
					sourceType: store.state.sign.sourceType
				}
				// 发送地区区号的请求
				const result = await postSignAPI(data)
				console.log(result)
				if (result.code === 200) {
					console.log(result)
					// 判断是否发送的请求码
					store.state.sign.sourceType = 1
					// 把验证码赋值给code
					store.state.sign.code = result.data
					uni.navigateTo({
						url: '/SignSubcontract/Verification/index'
					})
				}
			} else {
				showNotify({ type: 'danger', message: rel.msg });
			}

		} catch (error) {
			console.error('请求错误，请检查网络1')
		}
	}
	let argument = ref()
	// 提交事件
	const submit = async () => {
		// 提交时给vuex中的变量赋值
		store.state.sign.areacode = active.value
		store.state.sign.phone = phone.value
		store.state.sign.Email = email.value
		// store.state.sign.sourceType = 
		// 判断时手机号注册还是邮箱注册
		store.state.sign.number === '号码注册' ? Phone() : Email()
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.step {
			width: 144px;
			height: 6px;
		}

		text {
			color: #BABDC4;
			font-size: 28px;
		}
		.LOGIN{
			position: fixed;
			font-size: 32px;
			// padding-top: 62px;
			top: 62px;
			left: 40px;
			box-sizing: border-box;
			// margin-left: 40px;
			color: white;
		}

	}

	::v-deep.uni-select {
		height: 120px;
		width: 192px;
		color: #868598;
	}

	.pdg {
		padding: 0 40px;

		.input {
			display: flex;
			border-radius: 24px;
			height: 120px;
			background-color: #363653;
		}
	}

	::v-deep.uni-easyinput {
		width: 478px;
		height: 120px;
	}

	::v-deep.uni-stat__select[data-v-66f4e6bd] {
		flex: none;
		width: auto;
	}

	::v-deep.is-input-border[data-v-af395001] {
		height: 100%;
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
		border-top-left-radius: 24px;
		border-bottom-left-radius: 24px;
		border: none;
		background-color: #363653 !important;
	}

	::v-deep.uni-stat__actived[data-v-66f4e6bd] {
		border-top-left-radius: 24px;
		border-bottom-left-radius: 24px;
	}

	::v-deep.uni-easyinput {
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
		border: none;
	}

	::v-deep.uni-stat__actived {
		height: 120px;
		display: flex;
		align-items: center;
	}

	::v-deep.uni-select {
		border: none;
		height: 56px;
		border-right: 1px solid #BABDC4;
	}

	::v-deep.uni-select__input-box[data-v-66f4e6bd] {
		&>:nth-child(2) {
			display: none;
		}
	}

	::v-deep.uni-select__input-text {
		font-size: 32px;
		color: #d6d7de;
		text-align: center;
		line-height: 42px;
	}

	::v-deep.van-field {
		padding: 0 20px;
		box-sizing: border-box;
		font-size: 32px;
		text-align: center;
		color: #FFFFFF;
	}

	::v-deep.van-cell {
		background-color: transparent !important;
	}

	::v-deep.van-field__body {
		height: 100%;

		.van-field__control {
			text-align: center;
			color: #FFFFFF;
		}
	}

	::v-deep.uni-popper__arrow {
		display: none;
	}

	::v-deep.uni-select__selector[data-v-66f4e6bd] {
		top: calc(100% + 33px);
		max-height: 40vh;
		min-height: 0;
		border-radius: 24px;
		background: #363653;
		color: #d5d5e1;
		width: 334px;
		border: none;
		padding: 16px 70px 0 40px;

		.uni-select__selector-item {
			font-size: 28px;
			padding: 16px 0;

			uni-text {
				color: #BABDC4;
				width: 100%;
				display: block;

				span {
					width: 100%;
					color: #BABDC4;
					text-align: left;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	::v-deep.uni-select__selector-scroll[data-v-66f4e6bd] {
		height: 100%;
		max-height: none;
	}

	.signBtn {
		margin: 40px 40px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.SignIn {
			position: absolute;
			bottom: 94px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 28px;
			color: white;

			text {
				color: #0aa997;
			}
		}

	}

	::v-deep.van-notify--danger {
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		padding: 15px 0;
	}
</style>